<template>
	<div class="warp-box">
    <el-row class="search-box">
      <p class="chart_title">快速新建</p>
      <el-row type="flex" style="margin-top: 20px;padding-left:20px;text-aline:center" class="new_title">
        <el-col style="text-aline:center;">
          <p><i class="el-icon-s-custom" style="font-size:48px"></i></p>
          <p>新建客户</p>
        </el-col>
        <el-col>
          <p><i class="el-icon-s-opportunity" style="font-size:48px"></i></p>
          <p>新建商机</p>
        </el-col>
        <el-col>
          <p><i class="el-icon-s-order" style="font-size:48px"></i></p>
          <p>新建订单</p>
        </el-col>
        <el-col>
          <p><i class="el-icon-s-claim" style="font-size:48px"></i></p>
          <p>新建联系人</p>
        </el-col>
        <el-col>
          <p><i class="el-icon-edit" style="font-size:48px"></i></p>
          <p>写新跟进</p>
        </el-col>
        <el-col>
          <p><i class="el-icon-tickets" style="font-size:48px"></i></p>
          <p>新建任务</p>
        </el-col>
        <el-col>
          <p><i class="el-icon-document" style="font-size:48px"></i></p>
          <p>新建工单</p>
        </el-col>
        <el-col>
          <p><i class="el-icon-s-claim" style="font-size:48px"></i></p>
          <p>新建回款单</p>
        </el-col>
        <el-col>
          <p><i class="el-icon-date" style="font-size:48px"></i></p>
          <p>回款计划</p>
        </el-col>
      </el-row>
    </el-row>
		<el-row class="search-box">
      <el-col :span="5" class="index-top-left">
        <el-avatar class="top-head" icon="el-icon-user-solid" style="font-size: 30px" :size="40"></el-avatar>
        <p style="margin-top:14px">{{username}}</p>
        <p>{{providerName}}</p>
      </el-col>
      <el-col :span="3" class="index-top">
        <p>待跟踪商机</p>
        <p>2</p>
      </el-col>
      <el-col :span="3" class="index-top">
        <p>待收款</p>
        <p>2</p>
      </el-col>
      <el-col :span="3" class="index-top">
        <p>一次性任务待办</p>
        <p>2</p>
      </el-col>
      <el-col :span="3" class="index-top">
        <p>记账任务待办</p>
        <p>2</p>
      </el-col>
      <el-col :span="7" style="text-align: right">
        <el-radio-group v-model="dataTyle" size="small">
          <el-radio-button size="small" label="left">我的数据</el-radio-button>
          <el-radio-button size="small" label="right">部门数据</el-radio-button>
        </el-radio-group>
      </el-col>
    </el-row>
    <!-- <el-row class="search-box" style="margin-top:10px">
      <p>一次性任务指标</p>
      <el-col :span="6" class="index-top-left">
        <el-avatar class="top-head" icon="el-icon-s-data" style="font-size: 24px;background: #409EFF" :size="40"></el-avatar>
        <p style="margin-top:14px">任务总数</p>
        <p>40个</p>
      </el-col>
      <el-col :span="6" class="index-top-left">
        <el-avatar class="top-head" icon="el-icon-check" style="font-size: 24px;background: #67C23A" :size="40"></el-avatar>
        <p style="margin-top:14px">已完成数</p>
        <p>40个</p>
      </el-col>
      <el-col :span="6" class="index-top-left">
        <el-avatar class="top-head" icon="el-icon-plus" style="font-size: 24px;background: #E6A23C" :size="40"></el-avatar>
        <p style="margin-top:14px">本月新增数</p>
        <p>40个</p>
      </el-col>
      <el-col :span="6" class="index-top-left">
        <el-avatar class="top-head" icon="el-icon-close" style="font-size: 24px;background: #F56C6C" :size="40"></el-avatar>
        <p style="margin-top:14px">本月终止数</p>
        <p>40个</p>
      </el-col>
    </el-row> -->
    <el-row  :gutter="10" style="margin-top:10px">
      <el-col :span="12">
        <div class="search-box">
          <p class="chart_title">商机转化率</p>
          <el-row type="flex" style="margin-top: 20px;padding-left:20px;text-aline:center">
            <el-col>
              <p>新增客户</p>
              <p>0个</p>
            </el-col>
            <el-col>
              <p>新增线索</p>
              <p>0个</p>
            </el-col>
             <el-col>
              <p>新增商机</p>
              <p>0个</p>
            </el-col>
             <el-col>
              <p>新增订单</p>
              <p>0个</p>
            </el-col>
          </el-row>
          <el-row type="flex" style="margin-top: 20px;padding-left:20px;text-aline:center">
            <el-col>
              <p>新增联系人</p>
              <p>0个</p>
            </el-col>
            <el-col>
              <p>跟进次数</p>
              <p>0个</p>
            </el-col>
             <el-col>
              <p>处理任务</p>
              <p>0个</p>
            </el-col>
             <el-col>
              <p>处理工单</p>
              <p>0个</p>
            </el-col>
          </el-row>
        </div>
      </el-col>
      
      <el-col :span="12">
        <div class="search-box">
          <p class="chart_title">业绩目标</p>
    
          <el-row type="flex">
                <el-col>
                  <el-progress :width="150" type="circle" :percentage="25" :stroke-width="strokeWidth" style="margin:25px;"></el-progress>
                </el-col>
                <el-col style="margin: 10px 0 0 10px">
                  <p>目标金额</p>
                  <p style="fontSize:24px;">1200万</p>
                  <p>实际金额</p>
                  <p style="fontSize:24px;">1300万</p>
                </el-col>
              </el-row>
        </div>
      </el-col>
      <el-col :span="12" style="margin-top:10px;">
        <div class="search-box">
          <p class="chart_title">催缴代理费</p>
          <el-row type="flex" style="margin-top: 20px;padding-left:20px">
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                prop="date"
                label="客户名称"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="缴费类型"
                width="180">
              </el-table-column>
              <el-table-column
                prop="address"
                label="缴费截止日期">
              </el-table-column>
            </el-table>
          </el-row>
        </div>
      </el-col>
      <el-col :span="12" style="margin-top:10px;">
        <div class="search-box">
          <p class="chart_title">业绩排行</p>
          <div id="chart2" style="width:100%;height:380px"></div>
          <el-row type="flex">
            
          </el-row>
        </div>
      </el-col>
      <el-col :span="12" style="margin-top:10px;">
        <div class="search-box">
          <p class="chart_title">商机转化率</p>
          <div id="chart1" style="width:100%;height:380px"></div>
        </div>
      </el-col>
      <el-col :span="12" style="margin-top:10px;">
        <div class="search-box">
          <p class="chart_title">商机转化率</p>
          <div id="chart3" style="width:100%;height:380px"></div>
        </div>
      </el-col>
      
      
      
      
      
    </el-row>
    
    </div>
</template>

<script>
import Chart from './charts1'
export default {
  data () {
    return {
      loading: false,
      dataTyle: 'left',
      username: '',
      providerName: '',
      monthValue: '',
      strokeWidth: 10,
      progressWidth: 90,
      tableData: [{
            date: '公司名称1',
            name: '缴费类型',
            address: '2020-05-23'
          }, {
            date: '公司名称2',
            name: '缴费类型',
            address: '2020-05-23'
          }, {
            date: '公司名称3',
            name: '缴费类型',
            address: '2020-05-23'
          }, {
            date: '公司名称4',
            name: '缴费类型',
            address: '2020-05-23'
          }, {
            date: '公司名称5',
            name: '缴费类型',
            address: '2020-05-23'
          }, {
            date: '公司名称5',
            name: '缴费类型',
            address: '2020-05-23'
          }]
    }
  },
  components: {
  },
  methods: {
    drawLine(){
          // 为charts选定父容器并初始化charts画布
          const myChart = this.$echarts.init(document.getElementById('chart2'));
          const colors = ['#5793f3', '#67c23a'];

          // 为图表添加数据
          myChart.setOption({
            color: colors,

            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            grid: {
                right: '20%'
            },
            toolbox: {
                feature: {
                    // dataView: {show: true, readOnly: false},
                    // restore: {show: true},
                    // saveAsImage: {show: true}
                }
            },
            legend: {
                bottom:'bottom',
                data: ['目标金额', '成交金额']
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: ['销售1', '销售2', '销售3', '销售4', '销售5', '销售6', '销售7', '销售8', '销售9', '销售10', '销售11', '销售12']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '目标金额',
                    min: 0,
                    max: 250,
                    position: 'left',
                    axisLine: {
                        lineStyle: {
                            color: colors[0]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 万'
                    }
                },
                {
                    type: 'value',
                    name: '成交金额',
                    min: 0,
                    max: 250,
                    position: 'right',
                    
                    axisLine: {
                        lineStyle: {
                            color: colors[1]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 万'
                    }
                },
                
            ],
            series: [
                {
                    name: '目标金额',
                    type: 'bar',
                    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                },
                {
                    name: '成交金额',
                    type: 'bar',
                    yAxisIndex: 1,
                    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                },
            ]
        });
    },
    drawLine2(){
      const colors = ['#5793f3', '#67c23a'];
          // 为charts选定父容器并初始化charts画布
          let myChart = this.$echarts.init(document.getElementById('chart1'));
          // 为图表添加数据
          myChart.setOption({
            color: colors,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            grid: {
                right: '20%'
            },
            toolbox: {
                feature: {
                    // dataView: {show: true, readOnly: false},
                    // restore: {show: true},
                    // saveAsImage: {show: true}
                }
            },
            legend: {
                bottom:'bottom',
                data: ['预计销售额', '概率金额']
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '预计销售额',
                    min: 0,
                    max: 250,
                    position: 'left',
                    axisLine: {
                        lineStyle: {
                            color: colors[0]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 万'
                    }
                },
                {
                    type: 'value',
                    name: '概率金额',
                    min: 0,
                    max: 250,
                    position: 'right',
                    axisLine: {
                        lineStyle: {
                            color: colors[1]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 万'
                    }
                },
            ],
            series: [
                {
                    name: '预计销售额',
                    type: 'bar',
                    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                },
                {
                    name: '概率金额',
                    type: 'bar',
                    yAxisIndex: 1,
                    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                },
            ]
          });
      },
      drawLine3(){
      const colors = ['#5793f3', '#67c23a','#ffe100','#4c00ff','#aa00ff'];
          // 为charts选定父容器并初始化charts画布
          let myChart = this.$echarts.init(document.getElementById('chart3'));
          // 为图表添加数据
          myChart.setOption({
            color: colors,
            tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    legend: {
        data: ['初步洽谈','深入沟通','产品报价','成交商机','流失商机']
    },
    series: [
        {
            name: '预期',
            type: 'funnel',
            left: '10%',
            width: '80%',
            label: {
                formatter: '{b}预期'
            },
            labelLine: {
                show: false
            },
            itemStyle: {
                opacity: 0.7
            },
            emphasis: {
                label: {
                    position: 'inside',
                    formatter: '{b}预期: {c}%'
                }
            },
            data: [
                {value: 60, name: '初步洽谈'},
                {value: 40, name: '深入沟通'},
                {value: 20, name: '产品报价'},
                {value: 80, name: '成交商机'},
                {value: 100, name: '流失商机'}
            ]
        },
        {
            name: '实际',
            type: 'funnel',
            left: '10%',
            width: '80%',
            maxSize: '80%',
            label: {
                position: 'inside',
                formatter: '{c}%',
                color: '#fff'
            },
            itemStyle: {
                opacity: 0.5,
                borderColor: '#fff',
                borderWidth: 2
            },
            emphasis: {
                label: {
                    position: 'inside',
                    formatter: '{b}实际: {c}%'
                }
            },
            data: [
                {value: 30, name: '初步洽谈'},
                {value: 10, name: '深入沟通'},
                {value: 5, name: '产品报价'},
                {value: 50, name: '成交商机'},
                {value: 80, name: '流失商机'}
            ]
        }
    ]
          });
      }
  },
  mounted () {
    let userInfo = this.$utils.getLocalStorage('user')
    this.username = userInfo.name
    this.providerName = this.$utils.getLocalStorage('user').providerName
    this.drawLine()
    this.drawLine2()
    this.drawLine3()
  }
}
</script>

<style>
.index-top-left{
  line-height: 20px;
  font-size: 12px;
}
.index-top{
  border-left: #f4f4f4 solid 1px;
  text-align: center;
  line-height: 32px;
}
.chart_title{
  padding-left: 20px;
  border-bottom: #f4f4f4 solid 1px;
}
.new_title p{
  color: #a0a0a0;
}
</style>